if statement

if 語句是最簡單的決策語句，用於決定是否執行某個語句或語句塊(程式碼)

如果條件為true，則執行一個語句塊，否則不執行

有三大種 if statement:

if (條件condition) statement1;
// condition datatype -> boole, if true 執行 statement1

// example
if (true) console.log("This is true.");

// comparison & logical & if statement 結合 (有兩種寫法)
if (5 > 3 && 6 < 10) console.log("This is true.");

if (5 > 3 && 6 < 10) {
  console.log("This is true.");
}

if (condition) {
  statement1;
} else {
  statement2;
}

// example
if (true){
    console.log("Condition is true.");
}else{
    console.log("Condition is false.");
}

if (condition1) {
  statement1;
} else if (condition2) {
  statement2;
} …
 	else {  // optional
  statementN
}

// example
let age = 12;
if (age <= 18);{
    console.log("你是兒童");
}else if (age > 18 && age <= 35){
    console.log("你是青壯年");
}else{
    console.log("你不是兒童也不是青壯年");
}

小練習

題目
請製作一個系統。此系統可以讓使用者輸入年齡，根據年齡打印出相對應的電影票價。規則如下:
12 歲(含)以下為兒童票，票價 100 元。
12 歲以上到 65 歲以下(含)為成人票，票價 250 元。
65 歲以上為敬老票，票價 150 元。

解答

Java Script string to number

let age = prompt("請輸入你的年齡:");

age = Number(age);  // convert string to number
console.log(Number("我今年二十三歲"));  // -> NaN

if (age >= 0 && age <= 12) {
  alert("兒童票100");
} else if (age > 12 && age <= 65) {
  alert("成人票250");
} else (age > 65 && age <= 125){
  alert("敬老票150");
}

Truthy and Falsy Values

在 JavaScript 中，每個值(datatype)在 Boolean context (T 或 F 的上下文)之下，都可以被視為是 true 或是 false

常見的 Boolean context 有 if statement 以及 Logical Operators 運算

Boolean context 之下，JavaScript 會自動幫每個值做強制轉型 type coercion

所有 JavaScript 當中的 Falsy Values(Boolean context 之下被視為 false)全部是：

• false
• 0, -0, 0n (BitInt)
• “ ”, ‘ ’, ` ` (所有的 empty string)
• null
• undefined
• NaN

let x = 0;

if (x) {
  console.log("x is true");
} else {
  console.log("x is false");
}
// -> x is false

logical operator補充說明

&& 跟 || 基本上都是Boolean，如果不是，以下是他的規則

• &&
  If the left hand side is true, then it evaluates as the right hand side

  console.log(3 && 10);  // -> 10
  console.log(-3 && -10);  // -> -10
  

  If the left hand side is not true, then it evaluates as the left hand side

  console.log(0 && -100);  // -> 0
  console.log(0 && -0); // -> 0
  

• ||
  If left hand side can be converted to true, returns left hand side

  console.log(6 || 100);  // -> 6
  

  else, returns right hand side

  console.log(NaN || 100);  // -> 100
  

這個在JS的後端常見，因為有時會想去顯示某兩個變數值，而且也不知道誰是Truthy 或 Falsy

例如 -> 在撈資料時

let data = "Phoebe"
console.log(data || "資料讀取失敗");  // -> Phoebe (Truthy)

let data = ""
console.log(data || "資料讀取失敗");  // -> 資料讀取失敗 (Falsy)

除此之外的都是 truthy values，包含[] empty array, {} empty object

Coding 慣例 Convention and 限制 Restrictions

Convention

• 變數與函數的名稱，全部小寫

  若名稱由兩個以上的單字組成，則使用 camelCase (也可使用 underline _)

• Operators 周圍加上空白鍵

• 用分號結束一個簡單的 statement

• 常數Const全部使用大寫 (這樣在撰寫時，就能知道該值是無法更動的)

• Class 由大寫字母開頭

Restrictions

• 變數、函數名稱不可由數字開頭 (只能文字、_、$)
• 變數、函數名稱不可包含 hyphen "-" (Hyphen 已經預留給數字做減法運算)
• 變數、函數名稱不可使用 reserved words

下一篇文章來認識函數、return。